<template>
    <div style="margin: 0px auto">
        <h1 align="center">公告管理</h1>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    max-height="350">
                <el-table-column
                        fixed
                        prop="id"
                        label="ID"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="noticecontent"
                        label="公告内容"
                        width="300">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="createtime"
                        label="日期"
                        width="150">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index,scope.row)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                        <el-button
                                @click="dialogFormVisibles = true"
                                type="text"
                                size="small">
                            添加
                        </el-button>
                        <el-button
                                @click="update(scope.$index,scope.row)"
                                type="text"
                                size="small">
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-left: 150px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>

            <el-dialog title="修改公告" :visible.sync="dialogFormVisible">
                <el-form :model="notices" :rules="rules" ref="notices" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="发布时间" required>
                        <el-col :span="11">
                            <el-form-item prop="notices.createtime">
                                <el-date-picker type="date" placeholder="选择日期" v-model="notices.createtime"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="notices.noticecontent">
                        <el-input type="textarea" v-model="notices.noticecontent"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 100px">
                        <el-button type="primary" @click="updateForm('notices')">立即修改</el-button>
                        <el-button @click="dialogFormVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <el-dialog title="添加公告" :visible.sync="dialogFormVisibles">
                <el-form :model="stores" :rules="rules" ref="stores" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分店ID">
                        <el-select v-model="notice.storeid" placeholder="请选择" style="width: 300px">
                            <el-option
                                    v-for="item in stores"
                                    :key="item.value"
                                    :label="item.id"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布时间" required>
                        <el-col :span="11">
                            <el-form-item prop="notice.createtime">
                                <el-date-picker type="date" placeholder="选择日期" v-model="notice.createtime"
                                                style="width: 100%;"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="noticecontent">
                        <el-input type="textarea" v-model="notice.noticecontent"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 100px">
                        <el-button type="primary" @click="addForm('addnotice')">立即添加</el-button>
                        <el-button @click="dialogFormVisibles=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>
    </div>
</template>

<script>
    export default {
        name: "noticemanage",
        data() {
            return {
                dialogFormVisible: false,
                dialogFormVisibles: false,
                tableData: [],
                id: null,
                //获取点击行的内容
                notices: '',
                //绑定下拉框的
                stores: '',
                //添加信息
                notice: {
                    id: '',
                    storeid: '',
                    noticecontent: '',
                    createtime: ''
                }
            }
        },
        methods: {
            //修改传值
            update: function (index, row) {
                this.dialogFormVisible = true;
                this.notices = row;
            },
            //删除
            deleteRow: function (index, row) {
                this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.id = row.id
                    this.axios.post("/Storefront/DeleByIdNotice", this.id).then(response => {
                        if (response.data != null) {
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.axios.post("/Storefront/selectAll").then(response => {
                                this.tableData = response.data;
                            }).catch(function (error) {
                                window.console.log(error);
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已经取消删除'
                    })
                })
            },
            //添加方法
            addForm() {
                this.axios.post("/Storefront/insert", this.notice).then(response => {
                    if (response.data == 1) {
                        this.$alert("添加成功");
                    } else {
                        this.$alert("添加成功");

                    }
                }),
                    this.dialogFormVisibles = false;
            },
            //立即修改
            updateForm() {
                this.dialogFormVisible = false;
                this.axios.post("/Storefront/updateNotice", this.notices).then(response => {
                    if (response.data == 1) {
                        this.$alert("修改成功");
                    } else {
                        this.$alert("失败");
                    }
                })
            },
            //重置方法
            resetForm(addnotice) {
                this.$refs[addnotice].resetFields();
            }
        },

        created: function () {
            //请求公告信息
            this.axios.post("/Storefront/selectAll").then(response => {
                this.tableData = response.data;
                //请求分店名称
                this.axios.post("/Stores/QueryAllStores").then(response => {
                    var sto = response.data;
                    for (var i = 0; i < sto.length; i++) {
                        this.tableData[i].name = sto[i].name;
                    }
                }).catch(function (error) {
                    window.console.log(error);
                });
            }).catch(function (error) {
                window.console.log(error);
            });
            //绑定下拉框的ID
            this.axios.post("/Stores/QueryAllStores").then(response => {
                if (response.data == null) {
                    this.$alert("下拉框空值");
                } else {
                    this.stores = response.data;
                }
            })
        }
    }
</script>

<style scoped>

</style>